<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			<a href="javascript:history.back();" class="back-button">
				<i class="fa fa-arrow-left"></i> 返回
			</a>
			<p>在线支付</p>
		</header>

		<!-- 订单信息部分 -->
		<h3>订单信息：</h3>
		<div class="order-info">
			<p>
				{{ orders.business.businessName }}
				<i class="fa fa-caret-down" @click="detailetShow"></i>
			</p>
			<p>&#165;{{ orders.orderTotal }}</p>
		</div>

		<!-- 订单明细部分 -->
		<ul class="order-detailet" v-show="isShowDetailet">
			<li v-for="item in orders.list">
				<p>{{ item.food.foodName }} x {{ item.quantity }}</p>
				<p>&#165;{{ item.food.foodPrice * item.quantity }}</p>
			</li>
			<li>
				<p>配送费</p>
				<p>&#165;{{ orders.business.deliveryPrice }}</p>
			</li>
		</ul>

		<!-- 支付方式部分 -->
		<ul class="payment-type">
			<li @click="selectedPayment = 'alipay'">
				<img src="../assets/alipay.png" />
				<!-- 只有在选中的支付方式是支付宝时显示图标 -->
				<i v-if="selectedPayment === 'alipay'" class="fa fa-check-circle"></i>
			</li>
			<li @click="selectedPayment = 'wechat'">
				<img src="../assets/wechat.png" />
				<!-- 只有在选中的支付方式是微信时显示图标 -->
				<i v-if="selectedPayment === 'wechat'" class="fa fa-check-circle"></i>
			</li>
		</ul>
		<div @click="toPayIt" class="payment-button">
			<button>确认支付</button>
		</div>
		<CustomAlert ref="customAlert" />

		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script setup>
import { ref } from 'vue';

// 跟踪当前选中的支付方式
const selectedPayment = ref('alipay'); // 初始化支付方式为支付宝
</script>

<script>
import Footer from '../components/Footer.vue';
import CustomAlert from '../components/CustomAlert.vue';

export default {
	name: 'Payment',
	data() {
		return {
			orderId: this.$route.query.orderId,
			orders: {
				business: {}
			},
			selectedPayment: 'alipay',//默认支付方式为支付宝
			isShowDetailet: false,//赋假是因为初始隐藏
			orderState: 0//订单状态 0未支付 1已支付
		}
	},
	created() {
		this.orderId = this.$route.query.orderId;
		this.$axios.get(`Orders/orderId/${this.orderId}`)
			.then(response => {
				this.orders = response.data;
			}).catch(error => {
				console.error(error);
			});
	},
	mounted() {
		//这里的代码是实现：一旦路由到在线支付组件，就不能回到订单确认组件。
		//先将当前url添加到history对象中
		const currentState = history.state;
		history.replaceState({ ...currentState }, '', document.URL); // 保留现有的历史状态
		//popstate事件能够监听history对象的变化
		window.onpopstate = () => {
			this.$router.push({ path: '/index' });
		}
	},
	destroyed() {
		window.onpopstate = null;
	},
	methods: {
		navigateTo(url) {
			// 导航到指定页面
			window.location.href = url;
		},
		detailetShow() {
			this.isShowDetailet = !this.isShowDetailet;
		},
		toPayIt() {
			this.orderState = 1;

			// 调用更新订单状态的 API
			this.$axios.put(`Orders/states/orderId/${this.orderId}`)
				.then(response => {
					console.log('Order state updated successfully:', response.data);
					this.$router.push({ path: '/paySuccess' });
				}).catch(error => {
					console.error('Failed to update order state:', error);
				});
			this.$router.push({ path: '/paySuccess' });
		}
	},
	components: {
		Footer,
		CustomAlert
	}
}
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
	width: 100%;
	height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	color: #fff;
	font-size: 4.8vw;

	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;

	display: flex;
	justify-content: center;
	align-items: center;
}

.back-button {
	position: absolute;
	top: 3.5vw;
	/* 使用相对单位 */
	left: 2.5vw;
	/* 使用相对单位 */
	font-size: 4vw;
	/* 使用相对单位 */
	text-decoration: none;
	color: white;
	display: flex;
	align-items: center;
}

.back-button i {
	margin-right: 1vw;
	/* 使用相对单位 */
}

/* 针对大屏幕 (如 iPad) 的媒体查询 */
@media (min-width: 768px) {
	.wrapper header {
		height: 8vh;
		/* 使用相对高度单位 */
		font-size: 3vh;
	}

	.back-button {
		position: absolute;
		top: 3.5vw;
		/* 使用相对单位 */
		left: 2.5vw;
		/* 使用相对单位 */
		font-size: 4vw;
		/* 使用相对单位 */
		text-decoration: none;
		color: white;
		display: flex;
		align-items: center;
	}

	.back-button i {
		margin-right: 1vw;
		/* 使用相对单位 */
	}

	/* 针对大屏幕 (如 iPad) 的媒体查询 */
	@media (min-width: 768px) {
		.wrapper header {
			height: 8vh;
			/* 使用相对高度单位 */
			font-size: 3vh;
		}

		.back-button {
			top: 2.5vh;
			/* 使用相对高度单位 */
			left: 2vh;
			font-size: 2.5vh;
			/* 相对大小单位 */
		}

		.back-button i {
			margin-right: 0.5vh;
		}
	}

	/****************** 订单信息部分 ******************/
	.wrapper h3 {
		margin-top: 12vw;
		box-sizing: border-box;
		padding: 4vw 4vw 0;

		font-size: 4vw;
		font-weight: 300;
		color: #999;
	}

	.back-button i {
		margin-right: 0.5vh;
	}
}

/****************** 订单信息部分 ******************/
.wrapper h3 {
	margin-top: 12vw;
	box-sizing: border-box;
	padding: 4vw 4vw 0;

	font-size: 4vw;
	font-weight: 300;
	color: #999;
}

.wrapper .order-info {
	box-sizing: border-box;
	padding: 4vw;
	font-size: 4vw;
	color: #666;

	display: flex;
	justify-content: space-between;
	align-items: center;
}

.wrapper .order-info p:last-child {
	color: orangered;
}

/****************** 订单明细部分 ******************/
.wrapper .order-detailet {
	width: 100%;
}

.wrapper .order-detailet li {
	width: 100%;
	box-sizing: border-box;
	padding: 1vw 4vw;

	display: flex;
	justify-content: space-between;
	align-items: center;
}

.wrapper .order-detailet li p {
	font-size: 3vw;
	color: #666;
}

/****************** 支付方式部分 ******************/
.wrapper .payment-type {
	width: 100%;
}

.wrapper .payment-type li {
	width: 100%;
	box-sizing: border-box;
	padding: 4vw;

	display: flex;
	justify-content: space-between;
	align-items: center;
}

.wrapper .payment-type li img {
	width: 33vw;
	height: 8.9vw;
}

.wrapper .payment-type li .fa-check-circle {
	font-size: 5vw;
	color: #38CA73;
}

.wrapper .payment-button {
	width: 100%;
	box-sizing: border-box;
	padding: 4vw;
}

.wrapper .payment-button button {
	width: 100%;
	height: 10vw;
	border: none;
	/*去掉外轮廓线*/
	outline: none;
	border-radius: 4px;
	background-color: #38CA73;
	color: #fff;
}
</style>